<template>
  <div class="bgColor">
    <div class="information">
      <p class="information-title">服务类型</p>
      <p class="information-second-text">我们洞察劳务品牌本质，创造富有影响力的HR服务，助力品牌价值提升</p>
      <div class="header">
        <div
          class="header-item"
          v-for="(item,index) in iconList"
          :key="index"
          @click="getSelect(index)"
        >
          <div
            class="header-icon"
            :class="index===select?'header-icon-active':''"
          >
            <img
              :src="imgList[index].imgUrl"
            />
          </div>
          <div class="header-p">{{item}}</div>
        </div>
      </div>
      <div class="main-content">
        <div class="left">
          <div class="left-img">
            <img
              src="../assets/image/生产线外包服务.png"
            >
          </div>
        </div>
        <div
          class="right"
          @click="jump"
        >
          <div class="right-content">
            <div class="title">
              <p class="title-p">{{contentList[select].title}}</p>
            </div>
            <div class="content">
              <p class="content-p">
                {{contentList[select].content}}
              </p>
            </div>
            <div class="bottom-button">
              <p class="button-p">了解更多</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      iconList: ['劳务派遣', '农民工安置', '寒暑假工', '实习就业', '单招生', '产线外包'],
      imgList: [
        { imgUrl: require("../assets/image/劳务派遣.png") },
        { imgUrl: require("../assets/image/民工安置.png") },
        { imgUrl: require("../assets/image/寒暑假工.png") },
        { imgUrl: require("../assets/image/实习就业.png") },
        { imgUrl: require("../assets/image/单招生.png") },
        { imgUrl: require("../assets/image/产线外包.png") }
      ],
      select: 0,
      contentList: [
        {
          title: '劳务派遣降低成本，实现用工零风险',
          content: '我们能为您提供的核心服务是持续性的人才供给和规范的劳动关系管理，并着力于为企业减少劳动纠纷、规范管理行为、规避用工风险、建立灵活的用人机制，从而有效帮助企业和降低运营成本，实现企业高效运营。我们为您提供的增值服务有用工分析、人员招聘、岗位技能提升、薪酬激励设计、用工风险评估、劳动关系问题处理等咨询服务，从专业角度为您解决人力资源管理中的疑难问题。'
        },
        {
          title: '农民工劳务派遣',
          content: '我们能为您提供的大量合作企业的工作岗位提供和规范的劳动关系管理，解决农民工因为工作岗位不适合，生活不适应造成工作不稳定的问题。故我公司结合目前国内大型用工企业的类型和需求，及农民工朋友的民族特性、文化程度、年龄段和南北生活习惯等差异，现特推出国内领先的个性化岗位预定方式。'
        },
        {
          title: '解决寒暑假工实践',
          content: '我们能为您提供的大量合作企业的寒暑假工作岗位提供和规范的劳动关系管理，解决学生寒暑假做实践工作问题。故我公司结合目前国内大型用工企业的类型和订单集中需求，及寒暑假工学生的文化程度难找和事工作问题。做出合适解决方案。'
        },
        {
          title: '解决学生实习就业困难的问题',
          content: '我们能为您提供的大量合作企业的实习工作岗位提供和规范的劳动关系管理，解决学生实习就业工作问题。故我公司结合目前国内大型用工企业的类型和工作实习岗位招聘需求，及毕业学生实习就业困难，实习岗位与学生文化程度和技能不匹配的工作问题，做出合适解决方案。'
        },
        {
          title: '解决单招生工作问题',
          content: '我们能为您提供的大量合作企业的实习工作岗位提供和规范的劳动关系管理，解决学生早毕业出来就业困难工作问题。故我公司结合目前国内大型用工企业的类型和工作实习岗位招聘需求，及早毕业学生实习就业困难，实习岗位与学生文化程度和技能不匹配的工作问题，做出合适解决方案。'
        },
        {
          title: '产线外包集中精力专注于核心业务、促进产业升级',
          content: '生产线承包是指我们的单位租赁客户，招募员工组织生产，最后以计件制度的形式结算服务的生产线。生产外包（Production outsourcing）又称为制造外包，是以外加工方式将生产委托给外部优秀的专业化资源，达到降低成本、分散风险、提高效率、增强竞争力的目的，即是将一些传统上由企业内部人员负责的非核心业务或加工方式外包给专业的、高效的服务提供商，以充分利用公司外部最优秀的专业化资源，从而降低成本、提高效率，增强自身的竞争力的一种管理策略。生产外包要遵守有关的原则，而且实施生产外包要具备一定的前提条件。'
        },
      ]
    }
  },
  methods: {
    jump() {
      if (this.select === 0) {
        this.$router.push({
          path: "/service",
          query: {
            key: '2-0'
          }
        });
      } else if (this.select === 1) {
        this.$router.push({
          path: "/service",
          query: {
            key: '2-2'
          }
        });
      } else if (this.select === 2) {
        this.$router.push({
          path: "/service",
          query: {
            key: '2-5'
          }
        });
      } else if (this.select === 3) {
        this.$router.push({
          path: "/service",
          query: {
            key: '2-3'
          }
        });
      } else if (this.select === 4) {
        this.$router.push({
          path: "/service",
          query: {
            key: '2-4'
          }
        });
      } else {

        this.$router.push({
          path: "/service",
          query: {
            key: '2-1'
          }
        });

      }

    },
    getSelect(num) {
      this.select = num;
    }
  }
}
</script>

<style scoped lang="scss">
.bgColor {
  text-align: center;
}
.information {
  width: 1200px;
  height: 750px;
  margin: 0 auto;
  display: inline-block;
}
.header {
  width: 100%;
  height: 140px;
  margin-top: 50px;
}
.header-item {
  cursor: pointer;
  width: 200px;
  height: 100px;
  float: left;
}
.header-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  img{
    transform: scale(0.8)
  }
}
.header-icon-active {
  background-color: #ff8080;
}
.header-p {
  width: 200px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  color: rgba(0, 0, 0, 0.8);
  text-align: center;
}
.information-title {
  width: 100%;
  height: 45px;
  font-size: 32px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: rgba(0, 0, 0, 1);
  line-height: 45px;
  text-align: center;
  margin-top: 40px;
}
.information-second-text {
  width: 1200px;
  height: 30px;
  margin: 0 auto;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
  line-height: 27px;
  text-align: center;
  margin-top: 10px;
}
.main-content {
  width: 100%;
  height: 380px;
  margin-top: 50px;
}
.left {
  width: 50%;
  height: 380px;
  float: left;
}
.left-img {
  width: 100%;
  height: 340px;
  margin-top: 20px;
}
.right {
  width: 45%;

  height: 380px;
  float: left;
  margin-left: 5%;
}
.right-content {
  width: 100%;
  height: 340px;
  margin-top: 20px;
  display: inline-block;
}
.title {
  width: 100%;
  height: 20px;
  margin-top: 40px;
}
.title-p {
  font-size: 16px;
  line-height: 20px;
  color: #000;
  font-weight: bold;
  font-family: "微软雅黑";
  text-align: left;
}
.content {
  width: 100%;
  margin-top: 30px;
}
.content-p {
  font-size: 14px;
  line-height: 20px;
  color: #000;
  opacity: 0.7;
  text-align: left;
  font-family: "微软雅黑";
}
.bottom-button {
  margin-top: 70px;
  width: 120px;
  height: 36px;
  border-radius: 4px;
  background-color: #ff8080;
  cursor: pointer;
}
.button-p {
  width: 120px;
  height: 36px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  line-height: 36px;
  font-weight: bold;
}
/deep/ .el-carousel__button {
  width: 50px;
  height: 10px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
/deep/ .el-carousel__indicator.is-active button {
  background: #ff3434;
}
@media screen and (max-width: 800px) {
  .information{
    width:100%;
    height: auto;
    overflow: hidden;
    .information-title{
      font-size:1.2rem;
      margin-top:15px;
    }
    .information-second-text{
      width:100%;
      height:auto;
      overflow: hidden;
      font-size:0.7rem;
      line-height: 1.5;
      box-sizing: border-box;
      padding:0 15px;
      margin-top:0;
    }
    .header{
      margin-top:15px;
      height:auto;
      overflow: hidden;
      .header-item{
        width:33%;
        height:auto;
        overflow: hidden;
        .header-icon{
          width:60px;
          height:60px;
          img{
            transform: scale(0.4)
          }
        }
        .header-p{
          width:100%;
          font-size:0.8rem;
        }
      }
    }
    .main-content{
      margin-top:15px;
      height:auto;
      overflow: hidden;
      .left{
        width:100%;
        height:auto;
        display: none;
        .left-img{
          height:auto;
          margin-top:0;
          img{
            width:100%;
            height:auto;
          }
        }
      }
      .right{
        width:100%;
        margin:0;
        height:auto;
        overflow: hidden;
        .right-content{
          height:auto;
          overflow: hidden;
          box-sizing: border-box;
          padding:0 15px;
          margin-top:0;
          .title{
            margin-top:15px;
          }
          .content{
            margin-top:5px;
            p{
              font-size:0.6rem;
            }
          }
          .bottom-button{
            margin:15px auto;
          }
        }
      }
    }
  }
}
</style>

